@import '../../../ui/styles/_variables.less';
@import 'dark.less';

.header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: @transition;
    position: absolute;
    top: 0;
    z-index: 99;

    &:hover .mask {
        opacity: .8;
        box-shadow: 0 0 10px @background1;
    }

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: @default;
        z-index: 1;
        opacity: 0;
        transition: inherit;
    }

    .left {
        .user {
            .logo {
                width: 50px;
                height: 50px;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .name {
                color: @text;
            }
        }
    }

    .center {
        display: flex;
        justify-content: center;
        flex: 1;

        .nav {
            display: inline-flex;
            justify-content: space-between;
            align-items: center;

            a {
                padding: 12px 10px;
                margin: 0 10px;
            }
        }
    }

    .right {
        .m-dialog {
            .m-form {
                .m-form-item {
                    margin: 20px 0;
                }
            }
        }

        .login {
            color: @text2;
            cursor: pointer;
            border: 1px solid @border1;
            border-style: dashed;
            border-radius: 5px;
            padding: 5px 10px;
            transition: all .5s ease-in-out;

            &:hover {
                color: @primary;
                border: 1px solid @primary;
                border-style: solid;
            }

            span {
                margin-right: 5px;
            }
        }
    }
}